import React, { useContext, useEffect, useRef, useState, useCallback } from 'react';
import { useSize } from 'ahooks';
import * as BABYLON from 'babylonjs';
import { Button } from "antd";

import { Application } from "@yulintu/freesia-bootstrap";

import "./index.less";
import Animator from '../../framework/Animator';
import { CubeTexture, MeshBuilder, PBRMaterial } from 'babylonjs';

const Enviroment = function (props) {

    const context = useContext(Application.Context);
    const canvas = useRef();

    const [engine, setEngine] = useState();
    const [scene, setScene] = useState();

    const [animatorMove] = useState(new Animator());

    useEffect(() => {
        const engine = new BABYLON.Engine(canvas.current, true);
        setEngine(engine);
    }, []);


    useEffect(() => {

        if (!engine)
            return;

        const scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
        setScene(scene);

        const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 50, new BABYLON.Vector3(0, 0, 0), scene);
        camera.upperBetaLimit = Math.PI / 2.2;
        camera.upperRadiusLimit = 100;
        camera.lowerRadiusLimit = 20;
        // camera.upperAlphaLimit = 0;
        // camera.lowerAlphaLimit = -Math.PI / 2;
        // camera.panningSensibility = 5;
        camera.attachControl(canvas, true);

        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 10, 0), scene);
        // light.intensity = .1;


        // var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 3, 0), scene);
        // light.intensity = 1;
        // light.radius = 1;


        const envTex = CubeTexture.CreateFromPrefilteredData("/data/enviroments/env2.env", scene);
        scene.environmentTexture = envTex;
        scene.environmentIntensity = 0.005;
        const env = scene.createDefaultSkybox(envTex, true);


        // const boxMat = new BABYLON.StandardMaterial("largeGroundMat");
        // boxMat.diffuseTexture = new BABYLON.Texture("/data/dem/base/metal_plate_diff_1k.jpg");
        // boxMat.bumpTexture = new BABYLON.Texture("/data/dem/base/metal_plate_nor_gl_1k.jpg");
        // boxMat.ambientTexture = new BABYLON.Texture("/data/dem/base/metal_plate_ao_1k.jpg");
        // boxMat.specularTexture = new BABYLON.Texture("/data/dem/base/metal_plate_spec_1k.jpg");
        // boxMat.specularPower = 10;
        // boxMat.invertNormalMapX = true;
        // boxMat.invertNormalMapY = true;

        // const faceUV = [];
        // faceUV[0] = new BABYLON.Vector4(0.0, 0.0, 2.0, 0.2); //rear face
        // faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 2.0, 0.2); //rear face
        // faceUV[2] = new BABYLON.Vector4(0.0, 0.0, 2.0, 0.2); //rear face
        // faceUV[3] = new BABYLON.Vector4(0.0, 0.0, 2.0, 0.2); //rear face

        // const box = BABYLON.MeshBuilder.CreateSphere("box", {
        //     diameter: 1,
        //     frontUVs: new BABYLON.Vector4(0.0, 0.0, 5.0, 5.0)
        // });
        // box.material = boxMat;
        // box.position.y = 2;




        const largeGroundMat = new BABYLON.StandardMaterial("largeGroundMat", scene);
        largeGroundMat.specularColor = new BABYLON.Color3(0.1, 0.1, 0.1);
        largeGroundMat.diffuseTexture = new BABYLON.Texture("/data/dem/无标题.png");
        // largeGroundMat.diffuseColor = new BABYLON.Color3(1, 1, 0);
        // largeGroundMat.emissiveColor = new BABYLON.Color3(0.2, 0.2, 0);

        // const opacityTex = new BABYLON.Texture("/data/dem/cz.png");
        // opacityTex.hasAlpha = true;
        // largeGroundMat.opacityTexture = opacityTex;


        const largeGround = BABYLON.MeshBuilder.CreateGroundFromHeightMap("largeGround", "/data/dem/tif3.png", { width: 36.01, height: 36.01, subdivisions: 30, minHeight: 0, maxHeight: 5 });
        largeGround.material = largeGroundMat;
        largeGround.position.y = 1.05;

        const boxMat = new BABYLON.StandardMaterial("largeGroundMat");
        boxMat.diffuseTexture = new BABYLON.Texture("/data/dem/land.jpg");

        const faceUV = [];
        faceUV[0] = new BABYLON.Vector4(0.0, 0.0, 15.0, 1.0); //rear face
        faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 15.0, 1.0); //rear face
        faceUV[2] = new BABYLON.Vector4(0.0, 0.0, 15.0, 1.0); //rear face
        faceUV[3] = new BABYLON.Vector4(0.0, 0.0, 15.0, 1.0); //rear face

        const box = BABYLON.MeshBuilder.CreateBox("box", {
            width: 36.01,
            depth: 36.01,
            height: 2,
            faceUV: faceUV,
            wrap: true
        });
        box.position.y = 0;
        box.material = boxMat;



        // const groundMat = new BABYLON.StandardMaterial("groundMat", scene);
        // groundMat.alpha = 0.1;
        // groundMat.diffuseTexture = new BABYLON.Texture("/data/dem/R-C.jpg");
        // groundMat.reflectionTexture = new BABYLON.MirrorTexture("mirror", { ratio: 0.5 }, scene, true);
        // groundMat.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
        // groundMat.reflectionTexture.renderList = [env, box, largeGround];
        // groundMat.reflectionTexture.level = 1.0;
        // groundMat.reflectionTexture.adaptiveBlurKernel = 32;

        // const ground = MeshBuilder.CreateGround("ground", { width: 5000, height: 2490 });
        // ground.material = groundMat;
        // ground.position = new BABYLON.Vector3(0, -3, 0);


        // var mirror = MeshBuilder.CreateBox("Mirror", { size: 1 }, scene);
        // mirror.scaling = new BABYLON.Vector3(100.0, 0.01, 100.0);
        // mirror.material = new BABYLON.StandardMaterial("mirror", scene);
        // mirror.material.diffuseTexture = new BABYLON.Texture("/data/dem/land.jpg");
        // // mirror.material.specularColor = new BABYLON.Color3(0, 0, 0);
        // mirror.material.reflectionTexture = new BABYLON.MirrorTexture("mirror", { ratio: 0.5 }, scene, true);
        // mirror.material.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
        // mirror.material.reflectionTexture.renderList = [box, largeGround];
        // mirror.material.reflectionTexture.level = 1.0;
        // mirror.material.reflectionTexture.adaptiveBlurKernel = 32;
        // mirror.position = new BABYLON.Vector3(0, -3, 0);





        // const groundMat = new PBRMaterial("groundMat", scene);
        // // groundMat.roughness = .05;
        // // groundMat.reflectanceTexture = envTex;
        // // groundMat.albedoColor = BABYLON.Color3.White();
        // // groundMat.albedoTexture = new BABYLON.Texture("/data/dem/R-C.jpg");
        // groundMat.bumpTexture = new BABYLON.Texture("/data/dem/base/tiled_floor_001_nor_gl_1k.jpg");
        // groundMat.bumpTexture.uScale = 300;
        // groundMat.bumpTexture.vScale = 300;
        // groundMat.invertNormalMapX = true;
        // groundMat.invertNormalMapY = true;


        // groundMat.reflectionTexture = new BABYLON.MirrorTexture("mirror", { ratio: 0.5 }, scene, true);
        // groundMat.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
        // groundMat.reflectionTexture.renderList = [box];
        // groundMat.reflectionTexture.level = 1.0;
        // groundMat.reflectionTexture.adaptiveBlurKernel = 32;
        // // groundMat.metallicTexture = new BABYLON.Texture("/data/dem/base/hexagonal_concrete_paving_arm_1k.jpg");
        // // groundMat.useRoughnessFromMetallicTextureGreen = true;
        // // groundMat.useAmbientOcclusionFromMetallicTextureRed = true;
        // // groundMat.useMetallnessFromMetallicTextureBlue = true;
        // // groundMat.metallicTexture.uScale = 500;
        // // groundMat.metallicTexture.vScale = 500;


        // const ground = MeshBuilder.CreateGround("ground", { width: 500, height: 249 });
        // ground.material = groundMat;


















        var line2D = function (name, options, scene) {

            //Arrays for vertex positions and indices
            var positions = [];
            var indices = [];
            var normals = [];
            var standardUV;
            var width = options.width || 1;
            var path = options.path;
            var closed = options.closed || false;
            if (options.standardUV === undefined) {
                standardUV = true;
            }
            else {
                standardUV = options.standardUV;
            }

            var interiorIndex;

            //Arrays to hold wall corner data 
            var innerBaseCorners = [];
            var outerBaseCorners = [];

            var outerData = [];
            var innerData = [];
            var angle = 0;
            var lineNormal;
            var direction;
            var nbPoints = path.length;
            var line = BABYLON.Vector3.Zero();
            var nextLine = BABYLON.Vector3.Zero();
            path[1].subtractToRef(path[0], line);

            if (nbPoints > 2 && closed) {
                path[2].subtractToRef(path[1], nextLine);
                for (var p = 0; p < nbPoints; p++) {
                    angle = Math.PI - Math.acos(BABYLON.Vector3.Dot(line, nextLine) / (line.length() * nextLine.length()));
                    direction = BABYLON.Vector3.Cross(line, nextLine).normalize().y;
                    lineNormal = new BABYLON.Vector3(-line.z, 0, 1 * line.x).normalize();
                    line.normalize();
                    innerData[(p + 1) % nbPoints] = path[(p + 1) % nbPoints];
                    outerData[(p + 1) % nbPoints] = path[(p + 1) % nbPoints].add(lineNormal.scale(width)).add(line.scale(direction * width / Math.tan(angle / 2)));
                    line = nextLine.clone();
                    path[(p + 3) % nbPoints].subtractToRef(path[(p + 2) % nbPoints], nextLine);
                }
            }
            else {
                lineNormal = new BABYLON.Vector3(-line.z, 0, 1 * line.x).normalize();
                line.normalize();
                innerData[0] = path[0];
                outerData[0] = path[0].add(lineNormal.scale(width));

                for (var p = 0; p < nbPoints - 2; p++) {
                    path[p + 2].subtractToRef(path[p + 1], nextLine);
                    angle = Math.PI - Math.acos(BABYLON.Vector3.Dot(line, nextLine) / (line.length() * nextLine.length()));
                    direction = BABYLON.Vector3.Cross(line, nextLine).normalize().y;
                    lineNormal = new BABYLON.Vector3(-line.z, 0, 1 * line.x).normalize();
                    line.normalize();
                    innerData[p + 1] = path[p + 1];
                    outerData[p + 1] = path[p + 1].add(lineNormal.scale(width)).add(line.scale(direction * width / Math.tan(angle / 2)));
                    line = nextLine.clone();
                }
                if (nbPoints > 2) {
                    path[nbPoints - 1].subtractToRef(path[nbPoints - 2], line);
                    lineNormal = new BABYLON.Vector3(-line.z, 0, 1 * line.x).normalize();
                    line.normalize();
                    innerData[nbPoints - 1] = path[nbPoints - 1];
                    outerData[nbPoints - 1] = path[nbPoints - 1].add(lineNormal.scale(width));
                }
                else {
                    innerData[1] = path[1]
                    outerData[1] = path[1].add(lineNormal.scale(width));
                }
            }

            var maxX = Number.MIN_VALUE;
            var minX = Number.MAX_VALUE;
            var maxZ = Number.MIN_VALUE;
            var minZ = Number.MAX_VALUE;

            for (var p = 0; p < nbPoints; p++) {
                positions.push(innerData[p].x, innerData[p].y, innerData[p].z);
                maxX = Math.max(innerData[p].x, maxX);
                minX = Math.min(innerData[p].x, minX);
                maxZ = Math.max(innerData[p].z, maxZ);
                minZ = Math.min(innerData[p].z, minZ);
            }

            for (var p = 0; p < nbPoints; p++) {
                positions.push(outerData[p].x, outerData[p].y, outerData[p].z);
                maxX = Math.max(innerData[p].x, maxX);
                minX = Math.min(innerData[p].x, minX);
                maxZ = Math.max(innerData[p].z, maxZ);
                minZ = Math.min(innerData[p].z, minZ);
            }

            for (var i = 0; i < nbPoints - 1; i++) {
                indices.push(i, i + 1, nbPoints + i + 1);
                indices.push(i, nbPoints + i + 1, nbPoints + i)
            }

            if (nbPoints > 2 && closed) {
                indices.push(nbPoints - 1, 0, nbPoints);
                indices.push(nbPoints - 1, nbPoints, 2 * nbPoints - 1)
            }

            var normals = [];
            var uvs = [];

            if (standardUV) {
                for (var p = 0; p < positions.length; p += 3) {
                    uvs.push((positions[p] - minX) / (maxX - minX), (positions[p + 2] - minZ) / (maxZ - minZ));
                }
            }
            else {
                var flip = 0;
                var p1 = 0;
                var p2 = 0;
                var p3 = 0;
                var v0 = innerData[0];
                var v1 = innerData[1].subtract(v0);
                var v2 = outerData[0].subtract(v0);
                var v3 = outerData[1].subtract(v0);
                var axis = v1.clone();
                axis.normalize();

                p1 = BABYLON.Vector3.Dot(axis, v1);
                p2 = BABYLON.Vector3.Dot(axis, v2);
                p3 = BABYLON.Vector3.Dot(axis, v3);
                var minX = Math.min(0, p1, p2, p3);
                var maxX = Math.max(0, p1, p2, p3);

                uvs[2 * indices[0]] = -minX / (maxX - minX);
                uvs[2 * indices[0] + 1] = 1;
                uvs[2 * indices[5]] = (p2 - minX) / (maxX - minX);
                uvs[2 * indices[5] + 1] = 0;

                uvs[2 * indices[1]] = (p1 - minX) / (maxX - minX);
                uvs[2 * indices[1] + 1] = 1;
                uvs[2 * indices[4]] = (p3 - minX) / (maxX - minX);
                uvs[2 * indices[4] + 1] = 0;

                for (var i = 6; i < indices.length; i += 6) {

                    flip = (flip + 1) % 2;
                    v0 = innerData[0];
                    v1 = innerData[1].subtract(v0);
                    v2 = outerData[0].subtract(v0);
                    v3 = outerData[1].subtract(v0);
                    axis = v1.clone();
                    axis.normalize();

                    p1 = BABYLON.Vector3.Dot(axis, v1);
                    p2 = BABYLON.Vector3.Dot(axis, v2);
                    p3 = BABYLON.Vector3.Dot(axis, v3);
                    var minX = Math.min(0, p1, p2, p3);
                    var maxX = Math.max(0, p1, p2, p3);

                    uvs[2 * indices[i + 1]] = flip + Math.cos(flip * Math.PI) * (p1 - minX) / (maxX - minX);
                    uvs[2 * indices[i + 1] + 1] = 1;
                    uvs[2 * indices[i + 4]] = flip + Math.cos(flip * Math.PI) * (p3 - minX) / (maxX - minX);
                    uvs[2 * indices[i + 4] + 1] = 0;
                }
            }

            BABYLON.VertexData.ComputeNormals(positions, indices, normals);
            BABYLON.VertexData._ComputeSides(BABYLON.Mesh.DOUBLESIDE, positions, indices, normals, uvs);
            console.log(uvs)
            //Create a custom mesh  
            var customMesh = new BABYLON.Mesh("custom", scene);

            //Create a vertexData object
            var vertexData = new BABYLON.VertexData();

            //Assign positions and indices to vertexData
            vertexData.positions = positions;
            vertexData.indices = indices;
            vertexData.normals = normals;
            vertexData.uvs = uvs;

            //Apply vertexData to custom mesh
            vertexData.applyToMesh(customMesh);

            return customMesh;

        }
        var path = [
            new BABYLON.Vector3(-18, 0, -18),
            new BABYLON.Vector3(-18, 0, 18),
            new BABYLON.Vector3(18, 0, 18),
            new BABYLON.Vector3(18, 0, -18),
            new BABYLON.Vector3(-18, 0, -18),
        ];


        // var line = line2D("line", { path: path, width: 1.1, standardUV: false }, scene);

        const line = BABYLON.MeshBuilder.CreateTube("tube", { path: path, radius: 0.1, invertUV: true, sideOrientation: BABYLON.Mesh.DEFAULTSIDE }, scene);

        var lineMat2 = new BABYLON.StandardMaterial('lineMat2', scene);
        lineMat2.specularColor = new BABYLON.Color3(0, 0, 0);
        lineMat2.diffuseColor = BABYLON.Color3.FromHexString("#00FCFF");
        // lineMat2.diffuseTexture = new BABYLON.Texture("/data/lines/line4.png", scene);
        var texture2 = new BABYLON.Texture("/data/lines/line3.png", scene);
        // texture2.hasAlpha = true;
        lineMat2.opacityTexture = texture2;
        lineMat2.alpha = 0.5;
        lineMat2.emissiveColor = BABYLON.Color3.FromHexString("#00FCFF");
        // lineMat2.diffuseTexture = texture2;
        // lineMat2.useAlphaFromDiffuseTexture = true;
        // lineMat2.alpha = 0.5;
        line.material = lineMat2;

        // var line = BABYLON.MeshBuilder.CreateTube("tube", { path: path, radius: 0.5 }, scene);
        var lineMat = new BABYLON.StandardMaterial('lineMat', scene);
        // sourceMat.specularColor = new BABYLON.Color3.Red();
        lineMat.diffuseColor = BABYLON.Color3.FromHexString("#00FCFF");
        var texture = new BABYLON.Texture("/data/lines/line5.png", scene);
        texture.uScale = 0.8;
        lineMat.opacityTexture = texture;
        lineMat.specularColor = new BABYLON.Color3(0, 0, 0);
        lineMat.emissiveColor = BABYLON.Color3.FromHexString("#00FCFF");
        lineMat.alpha = 0.5;
        // line.material = lineMat;


        const tube = BABYLON.MeshBuilder.CreateTube("tube", { path: path, radius: 0.1, invertUV: true, sideOrientation: BABYLON.Mesh.DEFAULTSIDE }, scene);
        tube.material = lineMat;


        line.position.y = -1.5;
        tube.position.y = 1;

        // glLine.addIncludedOnlyMesh(tube);







        const start = new BABYLON.Vector3(-15, 0, -15);
        const middle = new BABYLON.Vector3(0, 10, 0);
        const end = new BABYLON.Vector3(15, 0, 15);



        const arc = BABYLON.Curve3.ArcThru3Points(start, middle, end);

        const arcline = BABYLON.MeshBuilder.CreateTube("arcline", { path: arc.getPoints(), radius: 0.1, invertUV: true, sideOrientation: BABYLON.Mesh.DOUBLESIDE }, scene);

        var lineMat3 = new BABYLON.StandardMaterial('lineMat3', scene);
        lineMat3.diffuseColor = BABYLON.Color3.FromHexString("#00FCFF");
        var texture3 = new BABYLON.Texture("/data/lines/line3.png", scene);
        lineMat3.opacityTexture = texture3;
        lineMat3.emissiveColor = BABYLON.Color3.FromHexString("#00FCFF");
        lineMat3.alpha = 0.5;
        arcline.material = lineMat3;






        scene.onBeforeRenderObservable.add(() => {
            texture.uOffset = (texture.uOffset + 0.002) % 1;
            texture2.uOffset = (texture2.uOffset + 0.005) % 1;
            texture3.uOffset = (texture3.uOffset + 0.01) % 1;
            // lineMat2.alpha = (lineMat2.alpha + 0.01) % 1;
        });













        const circle = BABYLON.MeshBuilder.CreateGround("circle", { width: 80, height: 80 });
        var circleMat = new BABYLON.StandardMaterial('circleMat', scene);
        var circleMatTexture = new BABYLON.Texture("/data/lines/circle.png", scene);
        circleMatTexture.hasAlpha = true;
        circleMat.diffuseTexture = circleMatTexture;
        circleMat.useAlphaFromDiffuseTexture = true;
        circleMat.alpha = 0.3;
        circle.material = circleMat;
        circle.position.y = -3.9;

        const circle2 = BABYLON.MeshBuilder.CreateGround("circle", { width: 70, height: 70 });
        var circleMat = new BABYLON.StandardMaterial('circleMat', scene);
        var circleMatTexture = new BABYLON.Texture("/data/lines/circle1.png", scene);
        circleMatTexture.hasAlpha = true;
        circleMat.diffuseTexture = circleMatTexture;
        circleMat.useAlphaFromDiffuseTexture = true;
        circleMat.alpha = 0.3;
        circle2.material = circleMat;
        circle2.position.y = -3.9;


        scene.onBeforeRenderObservable.add(() => {
            circle.rotation.y += 0.02;
            circle2.rotation.y -= 0.01;
        });





        const locatorWave = BABYLON.MeshBuilder.CreateGround("locatorWave", { width: 3, height: 3 });
        var locatorWaveMat = new BABYLON.StandardMaterial('locatorWaveMat', scene);
        var circleMatTexture = new BABYLON.Texture("/data/lines/wave.png", scene);
        circleMatTexture.hasAlpha = true;
        // locatorWaveMat.emissiveTexture = circleMatTexture;
        locatorWaveMat.diffuseTexture = circleMatTexture;
        // locatorWaveMat.alpha = 0.6;
        // locatorWaveMat.opacityTexture = circleMatTexture;
        locatorWaveMat.specularColor = new BABYLON.Color3(0, 0, 0);
        locatorWaveMat.emissiveColor = BABYLON.Color3.FromHexString("#00FCFF");
        // locatorWaveMat.diffuseColor = BABYLON.Color3.FromHexString("#00FCFF");
        locatorWaveMat.useAlphaFromDiffuseTexture = true;
        locatorWave.material = locatorWaveMat;
        locatorWave.position.y = 40;


        scene.onBeforeRenderObservable.add(() => {
            locatorWave.scaling.x = (locatorWave.scaling.x + 0.02) % 1;
            locatorWave.scaling.z = locatorWave.scaling.x;
            locatorWaveMat.alpha = (locatorWave.scaling.x > 0.7 ? (1 - locatorWave.scaling.x) / 0.3 : 1) * 1;
        });


        const locator = BABYLON.MeshBuilder.CreatePlane("locator", { width: 3, height: 5 });
        var locatorMat = new BABYLON.StandardMaterial('locatorMat', scene);
        var circleMatTexture = new BABYLON.Texture("/data/lines/locator.png", scene);
        circleMatTexture.hasAlpha = true;
        locatorMat.emissiveTexture = circleMatTexture;
        locatorMat.diffuseTexture = circleMatTexture;
        locatorMat.specularColor = new BABYLON.Color3(0, 0, 0);
        locatorMat.useAlphaFromDiffuseTexture = true;
        // locatorMat.emissiveColor = BABYLON.Color3.FromHexString("#00FCFF");
        locator.material = locatorMat;
        locator.position.y = 40;

        camera.onViewMatrixChangedObservable.add(
            (camera) => {
                var quat = BABYLON.Quaternion.Identity();
                camera.getWorldMatrix().decompose(BABYLON.Vector3.Zero(), quat, BABYLON.Vector3.Zero());
                var rot = quat.toEulerAngles();

                locator.rotation.y = rot.y;
            }
        )


        animatorMove.onChanged(e => {
            locatorWave.position.x = e.x;
            locatorWave.position.y = e.y;
            locatorWave.position.z = e.z;
            locator.position.x = e.x;
            locator.position.y = e.y + 1.5;
            locator.position.z = e.z;
        });

        scene.onPointerObservable.add(e => {

            switch (e.type) {
                case BABYLON.PointerEventTypes.POINTERPICK:
                    if (e.pickInfo.hit) {
                        animatorMove.from({
                            x: locatorWave.position.x,
                            y: locatorWave.position.y,
                            z: locatorWave.position.z,
                        }).to({
                            x: e.pickInfo.pickedPoint.x,
                            y: e.pickInfo.pickedPoint.y + 0.2,
                            z: e.pickInfo.pickedPoint.z,
                        }).start();
                    }

                    break;

                default:
                    break;
            }
        });




        var glLine = new BABYLON.GlowLayer("glow", scene, {
            mainTextureFixedSize: 1024,
            blurKernelSize: 64
        });



        const groundMat2 = new BABYLON.StandardMaterial("groundMat", scene);
        // groundMat2.alpha = 0.8;
        groundMat2.specularColor = new BABYLON.Color3(0, 0, 0);
        groundMat2.diffuseColor = new BABYLON.Color3(0, 0, 0);
        groundMat2.reflectionTexture = new BABYLON.MirrorTexture("mirror", { ratio: 0.3 }, scene, true);
        groundMat2.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1.0, 0, -2.0);
        groundMat2.reflectionTexture.renderList = [env, box, largeGround, tube];
        groundMat2.reflectionTexture.level = 0.8;
        groundMat2.reflectionTexture.adaptiveBlurKernel = 64;

        const ground2 = MeshBuilder.CreateGround("ground", { width: 10000, height: 10000 });
        ground2.material = groundMat2;
        ground2.position = new BABYLON.Vector3(0, -4, 0);


    }, [engine, animatorMove]);

    useEffect(() => {
        engine?.runRenderLoop(() => {
            scene?.render();
        });
    }, [engine, scene])

    const size = useSize(canvas.current);

    useEffect(() => {
        engine?.resize();
    }, [engine, size?.width, size?.height])

    return <>
        <div className='babylon-frame'>
            <canvas ref={canvas}></canvas>
        </div>
    </>
}

export default Enviroment;